<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:ui="http://java.sun.com/jsf/facelets">

<!-- 
		Replace path to template, title, header and body
		with actual data.
	 -->
<ui:composition template="/templates/store.xhtml">
	<ui:define name="pageTitle">Descriptif du rêve</ui:define>
	<ui:define name="pageHead"></ui:define>
	<ui:define name="first"></ui:define>
	<ui:define name="body">

		<div class="row">
			<div class="margin-top-medium">

				<div class="large-12 columns">
				
					<div class="small-2 columns">
						<h:graphicImage value="/img/reves/#{ficheProduitMB.reve.image}" width="150px" height="150px" alt="test alt"/>
					</div>
					
					<div class="small-4 columns">
						<p>#{ficheProduitMB.reve.nom}</p>
						<p>#{ficheProduitMB.reve.prix} €</p>
						<img src="../img/reves/etoiles.png" alt="not found" />
					</div>
	
					<div class="large-offset-2 small-4 columns">
						<a href="#" class="button radius large">Acheter</a> <br />
						<a href="#">Ajouter aux favoris </a><h:graphicImage value="../img/imgtest/coeurfavori.png" width="20" height="20" />
					</div>
	
				</div>
			</div>
		</div>

		<div class="row">
			<div class="margin-top-small">
					<div class="small-4 columns">
					
					
						<span class="title-style">Description :</span>
					
					<div class="margin-bottom-small descReve" style="padding:0 0 0 20px">
						<dl>
							<dt>Réalisme</dt>
							<dd>#{ficheProduitMB.reve.realisme}%</dd>
							
							<dt>Durée</dt>
							<dd>#{ficheProduitMB.reve.duree} min</dd>
							
							<dt>Nombre de personnes</dt>
							<dd>#{ficheProduitMB.reve.nbPersonnes}</dd>
							
							<dt>Nombre de lieux</dt>
							<dd>#{ficheProduitMB.reve.nbLieux}</dd>
							
						</dl>
						
						<span class="clear">&nbsp;</span>
					</div>
					
					<div class="margin-bottom-small">
						<span class="title-style">Avis :</span>
					</div>
					
					<ui:repeat var="comm" value="#{ficheProduitMB.listeCommentaires}">
						<div class="margin-bottom-small">
							<a href="#" data-reveal-id="#{comm.client.idClient}">#{comm.client.prenom} #{comm.client.nom}</a> <img src="../img/reves/ratestar.gif" alt="not found"/><br/><br/>
							<em>#{comm.titreCommentaire}</em>
							<span class="content-size">#{comm.commentaire}</span>
							<p>_______________________</p>
						</div>
						<div id="#{comm.client.idClient}" class="reveal-modal" data-reveal="true" >
  					<div></div>
  					<div class="row">
  						<div class="small-4 columns">
  							<h2>Fiche client</h2>
  						</div>  
  					
  					</div>
  						<div class="row">
					
							<div class="medium-4 small-12 columns descReve" >
								<dl>
									<dt>Nom</dt> 
										<dd>#{comm.client.nom}</dd>
									<dt>Prenom</dt>
										<dd>#{comm.client.prenom}</dd>
									<dt>Numero de téléphone</dt>
										<dd>#{comm.client.numTel}</dd>
									<dt>Date de Naissance</dt>
										<dd>#{comm.client.dateNaissance}</dd>
									<dt>Sexe</dt>
										<dd>#{comm.client.sexe}</dd>
									<dt>Adresse mail</dt>
										<dd>#{comm.client.mail}</dd>
								</dl>
							</div>				
  						  						
						</div>
      
      </div>
					</ui:repeat>
																	
						<a href="#" data-reveal-id="ajoutCommentaire" class="button radius tiny">Laisser un avis</a>
						
						
<!-- Ajout de commentaire -->
	
	
					<div id="ajoutCommentaire" class="reveal-modal" data-reveal="true">
  						
  						<div class="row">
							<div class="small-2 columns">
								<h:graphicImage value="/img/reves/#{ficheProduitMB.reve.image}" width="150" height="150"></h:graphicImage>
							</div>
					
							<div class="small-10 columns">
								<p>#{ficheProduitMB.reve.nom}</p>
								<p>#{ficheProduitMB.reve.prix} €</p>
								
							</div>				
  						</div>
  						<br/>
  						
  						<div class="row">
  							<div class="small-4 columns">
  								<input type="text" placeholder="titre"></input>
  							
  							</div>
  						
  						</div>
  						
  						<div class="row">
  							<div class="small-8 columns">
  							 
      							
      							<textarea placeholder="Commentaire"></textarea>
      							
    						</div>
  							
  							
  							<div class="small-4 columns">
  								<h:graphicImage value="/img/reves/etoiles.png" />
  							</div> 
  						  						
  						</div>
  						
  						<div class="row">
  							<div class="small-4 columns">
  								<a href="#" class="button radius tiny">Soumettre le commentaire</a>
  							</div>
  						</div>
  						  						
  						<a class="close-reveal-modal">&#215;</a>
					</div>
				
      <!-- Ajout ficheClient -->
      
      
      
      
      
					
				</div>
				
				<div class="large-offset-1 large-4 medium-5 small-12 columns">
												
						<div class="row">
							<div class="small-12 medium-10 big-8 small-centered columns">
								<label>Dans la même catégorie</label>
							</div>
						</div>
					<div class="row casse-medium reves-item">
						<div class="small-3 columns">
							<h:graphicImage value="/img/reves/reve1.bmp" width="100" height="100" />
						</div>
						<div class="small-9 columns">
						
							<div class="row">
								<div class="small-8 columns">
									<label>Rêve tout doux</label>
								</div>
								<div class="small-4 columns"></div>
							</div>
							
							<div class="casse-small">
								<div class="row casse-small">
									<div class="small-7 columns">
										<label>9.99€</label>
									</div>
									<div class="small-5 columns">
										<a href="#" class="button radius tiny">Acheter</a>
									</div>
								</div>
							</div>
						</div>
					</div>
				<div class="row casse-medium reves-item">
					<div class="small-3 columns">
						<h:graphicImage value="/img/reves/reve1.bmp" width="100" height="100" />
					</div>
					<div class="small-9 columns">
						<div class="row">
							<div class="small-8 columns">
								<label>Rêve tout doux</label>
							</div>
							<div class="small-4 columns"></div>
						</div>
						<div class="casse-small">
							<div class="row casse-small">
								<div class="small-7 columns">
									<label>9.99€</label>
								</div>
								<div class="small-5 columns">
									<a href="#" class="button radius tiny">Acheter</a>
								</div>
							</div>
						</div>
					</div>
				</div>
					<div class="row casse-medium reves-item">
						<div class="small-3 columns">
							<h:graphicImage value="/img/reves/reve1.bmp" width="100" height="100" />
						</div>
						<div class="small-9 columns">
							<div class="row">
								<div class="small-8 columns">
									<label>Rêve tout doux</label>
								</div>
								<div class="small-4 columns"></div>
							</div>
							<div class="casse-small">
								<div class="row casse-small">
									<div class="small-7 columns">
										<label>9.99€</label>
									</div>
									<div class="small-5 columns">
										<a href="#" class="button radius tiny">Acheter</a>
									</div>
								</div>
							</div>
						</div>
					</div>
					<div class="row casse-medium reves-item">
						<div class="small-3 columns">
							<h:graphicImage value="/img/reves/reve1.bmp" width="100" height="100" />
						</div>
						<div class="small-9 columns">
							<div class="row">
								<div class="small-8 columns">
									<label>Rêve tout doux</label>
								</div>
								<div class="small-4 columns"></div>
							</div>
							<div class="casse-small">
								<div class="row casse-small">
									<div class="small-7 columns">
										<label>9.99€</label>
									</div>
									<div class="small-5 columns">
										<a href="#" class="button radius tiny">Acheter</a>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>		
	</ui:define>
	<ui:define name="last"></ui:define>
</ui:composition>

</html>